<template>
	<view class="detail-container">
		<view class="detail-head" :style="{ paddingTop: barHeight + 'rpx' }">
			<view class="head-title">
				<image src="@/static/img/arr.png" mode="" @click="goto"></image>
				<text>职位详情</text>
			</view>
			<view class="head-gw">
				<view class="gw-title">{{ data.info.appPublishPosition?.positionName }}</view>
				<view class="gw-money">{{ data.info?.money }}</view>
				<view class="gw-border">
					<view class="border-item">{{ setName(data.info.appPublishPosition?.workType) }}</view>
					<view class="border-item">{{ setName1(data.info.appPublishPosition?.workAddressType) }}</view>
				</view>
				<view class="gw-type">
					<view class="type-xs" v-if="data.info.appPublishPosition.workType === 'PART_TIME_JOB'">
						<view class="xs-time">工作量:
							{{ data.info.appPublishPosition.workDays }}{{ data.info.appPublishPosition.unitText ? '/ ' + data.info.appPublishPosition.unitText : '' }}
						</view>
						<view class="xs-js">结算方式: {{ setFs(data.info.appPublishPosition.salarySettleType) }}</view>
					</view>
					<view class="type-xx" v-else>
						<image src="@/static/img/common/map.png" mode=""></image>
						<view class="map-title">{{ data.info?.appPublishPosition?.workAddress }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-yq-box">
			<view class="detail-yq">
				<view class="yq-top">
					<view class="top-title">任职要求</view>
					<view class="top-desc">
						最低学历  {{ setXl(data.info?.appPublishPosition.requireEdu) }} <br>年龄范围  
						{{ data.info?.appPublishPosition?.ageMin ? data.info.age : '不限' }}<br>
						技能/特长：{{ data.info.appPublishPosition.requireSkill }}
						<br>工作时间：{{ data.info?.appPublishPosition?.startWorkDate ? data.info.time : '不限' }}
					</view>
				</view>
				<view class="yq-bt">
					<view class="bt-title">工作要求</view>
					<view class="bt-desc">
						{{ data.info?.appPublishPosition?.workPositionDesc }}
					</view>
				</view>
			</view>
			<!-- 			<view class="detail-rs">
				<image src="@/static/img/common/user.jpg" mode=""></image>
				<view class="rs-info">
					<view class="info-title">
						<view class="name">宋女士</view>
						<view class="rz">·已认证</view>
					</view>
					<view class="info-gs">XXX科技有限公司</view>
				</view>
			</view> -->
		</view>
		<view class="btn" v-if="data.list.type !== 3">
			<button class="btns" v-if="data.list.type === 1" @click.stop="jump(1)">编辑</button>
			<button class="btns" v-if="data.list.type === 2" @click.stop="jump(2)">发布</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getStatusBarHeight
	} from '@/utils/common/common.js'
	import {
		showToast
	} from '@/utils/toast.js'
	import api from '@/utils/api/recruit.js'
	import {
		convertToK
	} from '@/utils/common/common.js'
	import {
		setDialogView
	} from '@/utils/dialogView.ts'
	const barHeight = ref(null)
	onLoad(res => {
		if (res.data) {
			let obj = JSON.parse(res.data)
			data.list = obj
			console.log(obj);
			// data.list = JSON.parse(res.data)
			// data.info =  JSON.parse(JSON.stringify(data.list.obj))
			// data.info.time = `${data.info.startWorkDate} - ${data.info.endWorkDate}`
			// data.info.age = `${data.info.ageMin}岁 - ${data.info.ageMax}岁`
			// console.log(data.list);
		}
		barHeight.value = getStatusBarHeight()
	})
	onMounted(_ => {
		getDetail()
	})
	// 数据
	const data = reactive({
		list: {
			title: '视频剪辑师',
			money: '4K-5K',
			border: [{
				name: '线上'
			}, {
				name: '兼职'
			}],
			type: '0',
			time: '3',
			fs: '日结'
		},
		info: {}
	})
	const setName = (positionName) => {
		// 根据 positionName 返回不同的文字
		switch (positionName) {
			case 'FULL_TIME':
				return '全职';
			case 'PART_TIME_JOB':
				return '兼职';
			default:
				return '未知';
		}
	}
	const setName1 = (positionName) => {
		// 根据 positionName 返回不同的文字
		switch (positionName) {
			case 'OFFLINE':
				return '线下';
			case 'ONLINE':
				return '线上';
			default:
				return '未知';
		}
	}
	const setFs = (positionName) => {
		// 根据 positionName 返回不同的文字
		switch (positionName) {
			case 'SINGLE_SETTLEMENT':
				return '单结';
			case 'DAILY_SETTLEMENT':
				return '日结';
			case 'MONTHLY_SETTLEMENT':
				return '月结';
			default:
				return '未知';
		}
	}
	const setXl = (positionName) => {
		console.log(positionName);
		// 根据 positionName 返回不同的文字
		switch (positionName) {
			case 'NONE':
				return '不限';
			case 'PRIMARY_SCHOOL':
				return '小学';
			case 'JUNIOR_HIGH_SCHOOL':
				return '初中';
			case 'HIGH_SCHOOL':
				return '高中/中专/技校';
			case 'JUNIOR_COLLEGE':
				return '大专';
			case 'UNDERGRADUATE':
				return '本科';
			case 'GRADUATE_STUDENT':
				return '研究生';
			case 'DOCTOR':
				return '博士';
			case 'PROFESSOR':
				return '教授/专家';
			default:
				return '未知';
		}
	}
	// 查询详情
	const getDetail = async _ => {
		const res = await api.viewPublishPosition(data.list.id)
		data.info = res.data
		data.info.time =
			`${data.info.appPublishPosition.startWorkDate} - ${data.info.appPublishPosition.endWorkDate}`
		data.info.age = `${data.info.appPublishPosition.ageMin}岁 - ${data.info.appPublishPosition.ageMax}岁`
		data.info.money =
			`${ convertToK(data.info.appPublishPosition.salaryMin)} - ${convertToK(data.info.appPublishPosition.salaryMax)}`
	}
	// 打开地图
	const openMap = _ => {
		setDialogView('ACCESS_FINE_LOCATION').then((res) => {
			if (res == 1) {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							name: data.info.workAddress,
							success: function() {
								console.log('success');
							}
						});
					}
				});
			}
		})

	}
	// 编辑/发布
	const jump = async index => {
		if (index === 1) {
			uni.navigateTo({
				url: `/pages/postPosition/postPosition?data=${JSON.stringify(data.list)}`
			})
		} else {
			data.list.positionState = 'RELEASE'
			const res = await api.saveOrUpdatePosition({
				appPublishPosition: data.list
			})
			if (res.code === 200) {
				showToast(res.msg)
				uni.$emit('refsh')
				uni.navigateBack()
			}
		}
	}
	// 返回
	const goto = _ => uni.navigateBack()
</script>

<style lang="scss">
	.detail-container {
		.detail-head {
			width: 750rpx;
			// height: 431rpx;
			background: url('@/static/img/common/zgzbgs.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding: 0 24rpx;
			box-sizing: border-box;

			.head-title {
				width: 750rpx;
				height: 89rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				image {
					width: 36rpx;
					height: 36rpx;
				}

				text {
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #333333;
					line-height: 48rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					margin-left: 244rpx;
				}
			}

			.head-gw {
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 24rpx;
				box-sizing: border-box;
				margin-top: 34rpx;

				.gw-title {
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 42rpx;
					color: #262626;
					line-height: 64rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.gw-money {
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #6B64D3;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-top: 8rpx;
				}

				.gw-border {
					margin-top: 16rpx;
					display: flex;
					align-items: center;

					.border-item {
						padding: 6rpx 16rpx;
						box-sizing: border-box;
						background: #F4F6FA;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 24rpx;
						color: #8C8C8C;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-right: 12rpx;
					}
				}

				.gw-type {
					margin-top: 24rpx;

					.type-xs {
						background: #E4E2FC;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						border: 1rpx solid #6B64D3;
						padding: 12rpx 24rpx;
						box-sizing: border-box;

						.xs-time {
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #6B64D3;
							line-height: 42rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						.xs-js {
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #6B64D3;
							line-height: 42rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-top: 12rpx;
						}
					}

					.type-xx {
						padding: 12rpx 24rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						background: #E4E2FC;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						border: 1rpx solid #6B64D3;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 12rpx;
						}

						.map-title {
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #6B64D3;
							line-height: 42rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}
				}
			}
		}

		.detail-yq-box {
			padding: 24rpx;
			box-sizing: border-box;

			// background: #FFFFFF;
			.detail-yq {
				padding: 24rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 32rpx;

				.yq-top {
					.top-title {
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 36rpx;
						color: #262626;
						line-height: 54rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.yq-desc {
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #262626;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-top: 16rpx;
					}
				}

				.yq-bt {
					margin-top: 24rpx;

					.bt-title {
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 36rpx;
						color: #262626;
						line-height: 54rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.bt-desc {
						margin-top: 16rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #262626;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
			}

			.detail-rs {
				padding: 24rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				background: #fff;
				margin-top: 32rpx;

				image {
					width: 128rpx;
					height: 128rpx;
					border-radius: 50%;
				}

				.rs-info {
					margin-left: 16rpx;

					.info-title {
						display: flex;
						align-items: center;

						.name {
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 42rpx;
							color: #262626;
							line-height: 64rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						.rz {
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #000000;
							line-height: 42rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-left: 12rpx;
						}
					}

					.info-gs {
						margin-top: 8rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 32rpx;
						color: #8C8C8C;
						line-height: 48rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}

		.btn {
			// width: 750rpx;
			// height: 112rpx;
			// padding: 12rpx 0;
			padding-bottom: 40rpx;
			padding-top: 10rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;

			.btns {
				width: 640rpx;
				height: 88rpx;
				background: #6B64D3;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				color: #fff;
			}
		}

	}
</style>